<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="68px">
          <el-form-item label="关键字" prop="userName">
            <el-input
              v-model="queryParams.keyword"
              placeholder="关键字搜索"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="爬虫源" prop="status">
            <el-select
              v-model="useSource"
              placeholder="选择爬虫爬虫源"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="crawlSource in crawlSources"
                :key="crawlSource.id"
                :label="crawlSource.sourceName"
                :value="crawlSource.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">刷新</el-button>
          </el-form-item>
        </el-form>


        <el-table v-loading="loading" :data="bookList" >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="索引" align="center" type="index" :index="indexMethod"  />
          <el-table-column label="小说封面" align="center" key="bookName" prop="bookName"  :show-overflow-tooltip="true" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl"  style="width: 80%">
            </template>
          </el-table-column>
          <el-table-column label="小说名" align="center" key="catName" prop="bookName"  width="100"/>
          <el-table-column label="作者名" align="center" key="authorName" prop="authorName" width="100"  />
          <el-table-column label="简介" align="center" key="bookStatus" prop="bookDesc"   />
          <el-table-column
            label="操作"
            align="center"
            width="160"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  :loading="scope.row.loading"
                  v-if="!scope.row.isAdd"
                  icon="el-icon-circle-plus"
                  @click.native.prevent="handleCrawl(scope.row)"
                  v-hasPermi="['system:user:edit']"
                >
                  <!--                <svg-icon icon-class=""爬取-->
                  爬取
                </el-button>
                <svg-icon v-else icon-class="success"/>
            </template>
          </el-table-column>
        </el-table>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import {getCrawlSource,getCrawlAndRule,defaultCrawlAndRule,crawlNovelList,crawlNovel} from "@/api/sys/crawl";
import iFrame from "@/components/iFrame/index"

export default {
  name: "index",
  components:{
    iFrame
  },
  data(){
    return{
      queryParams:{
        keyword:undefined,
        crawlId:undefined
      },
      crawlSources:[],
      crawlSourceAndRule:undefined,
      searchUrl:undefined,
      bookList:[],
      loading:false,
      useSource:{}
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      getCrawlSource().then(response=>{
        this.crawlSources=response.data
        this.getDefaultSource()
      })
    },
    //刷新页面
    resetQuery(){
      this.handleQuery();
    },
    getDefaultSource(){
      if (!this.crawlSources&&this.crawlSources<=0){
        return;
      }
      this.crawlSources.forEach((crawlSource,index)=>{
        if (crawlSource.sourceStatus){
          this.useSource=crawlSource
        }
      })
    },
    async handleQuery(){
      //查询爬虫源以及爬虫规则
      this.loading=true
      this.queryParams.crawlId = this.useSource.id
      crawlNovelList(this.queryParams).then(response=>{
        this.bookList=response.data
      }).finally(()=>{
        this.loading=false
      })

      if (this.crawlSourceAndRule){
        console.log(this.crawlSourceAndRule)
        this.handleRule()
      }

      //根据关键字查询信息
    },
    indexMethod(index){
      return index+1
    },
    handleCrawl(row){

      // 爬取该小说内容
      if (row){
        row.loading=true
      }
        crawlNovel(row.crawlBookId).then(response=>{
          this.$message.success("成功添加到爬虫队列中")
          row.isAdd=true
        }).finally(()=>{
          this.loading=false
        })

    }
  }
}
</script>

<style scoped>

</style>
